<!--
 * @Description: TCP Ping
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-28 14:38:04
 * @LastEditTime: 2021-11-01 19:06:49
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content" style="padding: 0">
    <div class="table-top">
      <!-- 刷新 -->
      <el-button size="medium" plain @click="refresh">刷新</el-button>
      <!-- 新建 -->
      <el-button size="medium" type="primary" plain @click="handleCreate" v-power="2">新建</el-button>
    </div>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <el-table-column label="ID" align="center" width="100" sortable prop="id" />
      <el-table-column label="源IP" min-width="200" align="center" prop="srcIp" />
      <el-table-column label="源端口" min-width="200" align="center" prop="srcPort" />
      <el-table-column label="VRF" min-width="200" align="center" prop="vrfName" />
      <el-table-column label="目的IP" min-width="200" align="center" prop="destIp" />
      <el-table-column label="目的端口" min-width="200" align="center" prop="destPort" />
      <el-table-column label="发送次数" min-width="100" align="center" prop="repeat" />
      <el-table-column label="发送间隔" min-width="100" align="center" prop="interval" />
      <!-- 操作 -->
      <el-table-column fixed="right" align="center" label="操作" width="200px">
        <!--  删除-->
        <template slot-scope="scope">
          <el-button
            type="text"
            :style="{color: scope.row.status ? '#de8f40': '#96da80'}"
            :icon="scope.row.status ? 'el-icon-video-pause': 'el-icon-video-play' "
            @click="handlePing(scope.$index, scope.row)"
            v-power="ne.dgId === 100000 ? 0 : 2"
          >{{scope.row.status ? '结束' : '开始'}}</el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            :disabled="scope.row.status"
            v-power="ne.dgId === 100000 ? 0 : 2"
          >编辑</el-button>
          <el-button
            type="text"
            style="color: #FA6962"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            :disabled="scope.row.status"
            v-power="ne.dgId === 100000 ? 0 : 2"
          >删除</el-button>
        </template>
      </el-table-column>
    </tao-table>
    <forms
      :ne="ne"
      :type="type"
      :dialogStatus="dialogStatus"
      :pingInfo="pingInfo"
      :vrfList="vrfList"
      @handleDialog="handleDialog"
    ></forms>
    <el-dialog
      title="TCP Ping结果"
      :close-on-click-modal="false"
      width="500px"
      :visible.sync="dvEdit"
    >
      <div class="ping-result">
        <ul>
          <li>
            <label>已发送</label>
            <span>{{ pingResult['send'] }}</span>
          </li>
          <li>
            <label>已接收</label>
            <span>{{ pingResult['receive'] }}</span>
          </li>
          <li>
            <label>丢失</label>
            <span>{{ pingResult['receive'] === pingResult['send'] ? "0" : ((pingResult['send'] - pingResult['receive']) / pingResult['send']) * 100 + "%" }}</span>
          </li>
          <li>
            <label>最短</label>
            <span>{{ pingResult['minRtt'] }}ms</span>
          </li>
          <li>
            <label>最长</label>
            <span>{{ pingResult['maxRtt'] }}ms</span>
          </li>
          <li>
            <label>平均</label>
            <span>{{ pingResult['avgRtt'] }}ms</span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <!--取 消  确 定-->
        <el-button @click="dvEdit = false">取消</el-button>
        <el-button type="primary" @click="dvEdit = false">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import forms from './forms.vue';
export default {
  props: ['ne'],
  components: {
    forms
  },
  data () {
    return {
      dataList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      type: 'create',
      dialogStatus: false,
      vrfList: [],
      pingInfo: {},
      dvEdit: false,
      pingResult: {}
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  methods: {
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 新建
    handleCreate () {
      let _this = this;
      _this.type = 'create';
      _this.getVrfArry();
      _this.pingInfo = {};
      _this.dialogStatus = true;
    },
    // 根据dgId过滤查询vrf
    getVrfArry () {
      let _this = this;
      _this.$http.post({
        url: '/api/resource/nemng/confobjs/' + _this.ne.id,
        data: {
          tid: 'nbf.res.vpn.vrf'
        }
      }).then(res => {
        if (res) {
          let list = res;
          _this.vrfList = list;
        }
      });
    },
    // 编辑
    handleEdit (row) {
      let _this = this;
      _this.type = 'edit';
      _this.getVrfArry();
      _this.pingInfo = row;
      _this.dialogStatus = true;
    },
    // 新建、编辑的回调
    handleDialog (data) {
      let _this = this;
      _this.type = 'create';
      _this.dialogStatus = data;
    },
    // 启动 or 停止
    handlePing (index, row) {
      let _this = this;
      _this.$http.post({
        url: '/api/sdwan/sqa/test/tcp/open',
        data: {
          neId: _this.ne.id,
          id: row.id,
          status: row.status ? false : true
        }
      }).then(res => {
        let { status } = res;
        if (status === '0') {
          _this.dataList[index].status = !row.status;
          _this.$message({
            type: row.status ? 'info' : 'success',
            message: row.status ? '开始执行Ping！' : '停止Ping！',
          });
          if (!row.status) { _this.getResult(index, row) }
        }
      });
    },
    // 获取结果
    getResult (index, row) {
      let _this = this;
      _this.$http.post({
        url: '/api/sdwan/sqa/test/tcp/result',
        data: {
          neId: _this.ne.id,
          id: row.id
        }
      }).then(res => {
        let { status } = res;
        if (status === '0') {
          if (res.resultBody) {
            _this.dvEdit = true;
            _this.pingResult = res.resultBody;
          } else {
            _this.$message.info('无返回结果，请重试！');
          }
        }
      });
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        neId: _this.ne.id,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/sqa/test/tcp/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 删除
    handleDelete (row) {
      let _this = this;
      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        _this.$http.deleted({
          url: '/api/sdwan/sqa/test/tcp/remove/' + row.id,
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.$message.success('删除成功！');
            _this.refresh();
          }
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
.ping-result {
  border: 1px solid #e8eaec;
  border-bottom: 0;
  border-right: 0;
  width: 100%;
  overflow: auto;
  ul {
    list-style: none;
    li {
      width: calc(33.3333% - 1px);
      height: 100px;
      float: left;
      border-right: 1px solid #e8eaec;
      border-bottom: 1px solid #e8eaec;
      label {
        display: block;
        margin: 0;
        padding: 15px;
      }
      span {
        text-align: center;
        display: block;
        width: 100%;
        font-size: 20px;
        font-weight: 500;
        padding: 0;
        margin: 0 auto;
        color: #1495eb;
      }
    }
    &:last-child::after {
      display: block;
      clear: both;
      content: "";
      overflow: hidden;
    }
  }
}
</style>